import "./index.scss";
import toolsRight from "../../../../images/base/toolsRight.png";
import toolsIcon1 from "../../../../images/my/toolsIcon1.png";
import toolsIcon2 from "../../../../images/my/toolsIcon2.png";
import toolsIcon3 from "../../../../images/my/toolsIcon3.png";
import toolsIcon4 from "../../../../images/my/toolsIcon4.png";
import toolsIcon5 from "../../../../images/my/toolsIcon5.png";
import { useNavigate } from 'react-router-dom'

function ToolsBox() {
  const navigate=useNavigate()
  const goPath=(path)=>{ 
    console.log("path",path) 
    navigate(path)
  }
  
  const handleItemClick = (path, event) => {
    console.log("点击事件触发", path); // 添加调试信息
    event.stopPropagation(); // 阻止事件冒泡
    event.preventDefault();  // 阻止默认行为
    goPath(path);
  }
  return (
    <div className="tools-box">
      <div className="item-option item-bottom-border" onClick={(e) => handleItemClick('/PledgeList', e)}>
        <div className="left-option" >
          <img className="left-icon" src={toolsIcon1}></img>
          <div className="left-txt">质押记录</div>
        </div>
        <div className="right-option">
          <img className="icon" src={toolsRight}></img>
        </div>
      </div>
      <div className="item-option item-bottom-border">
        <div className="left-option">
          <img className="left-icon" src={toolsIcon2}></img>
          <div className="left-txt">我的质押</div>
        </div>
        <div className="right-option">
          <img className="icon" src={toolsRight}></img>
        </div>
      </div>
      <div className="item-option item-bottom-border" onClick={(e) => handleItemClick('/Swap', e)}>
        <div className="left-option">
          <img className="left-icon" src={toolsIcon3}></img>
          <div className="left-txt">Swap</div>
        </div>
        <div className="right-option">
          <img className="icon" src={toolsRight}></img>
        </div>
      </div>

      <div className="item-option item-bottom-border" onClick={(e) => handleItemClick('/Team', e)}>
        <div className="left-option">
          <img className="left-icon" src={toolsIcon4}></img>
          <div className="left-txt">我的团队</div>
        </div>
        <div className="right-option">
          <img className="icon" src={toolsRight}></img>
        </div>
      </div>

      <div className="item-option">
        <div className="left-option">
          <img className="left-icon" src={toolsIcon5}></img>
          <div className="left-txt">语言设置</div>
        </div>
        <div className="right-option">
          <div className="txt">简体中文</div>
          <img className="icon" src={toolsRight}></img>
        </div>
      </div>
    </div>
  );
}
export default ToolsBox;
